import  React, { Component} from  'react'
import  ReactDOM from  'react-dom'
import  { connect } from  'react-redux'
import  { bindActionCreators } from 'redux'
import  Image from '../components/image/image'
import  ImageNav from  '../components/image/image_nav'
import {onImageClick,onCenterImageClick } from '../actions/actions'

class   ImageList extends  Component {
    constructor(props) {
        super(props)
        this.onClikPhoto = this.onClikPhoto.bind(this)
        this.onClikCenterPhoto = this.onClikCenterPhoto.bind(this)
        this.state = { centerstyle: this.centerPhotoStyle(true)}
    }

    //采用分开渲染的策略 让他点击的时候会有图片进行位置还有方位的变化
    //这样每种照片的样式就可以分开，让每种照片加载自己的css样式
    //增加component组件的重用性
    //下面是加载左右两侧散列的照片的方法 他们对应的是photo photo_front的样式
    //返回的样式用object的形式封装在一起
    //散列的照片只有正面展示所以他不用添加所以照片转动的样式应该加载在中间照片的样式中
    sidePhotoStyle(side) {
        let ranges = this.range()
        let  photo = {
            left: this.random(ranges[side].x)+ 'px' ,
            top: this.random(ranges[side].y)+ 'px',
            transform: 'rotate('+this.random([-90, 120]) + 'deg) scale(1)' ,
            WebkitTransform: 'rotate('+this.random([-90, 120]) + 'deg) scale(1)',
            }
        let photo_front= {
            transform: 'translate(0px, 0px) rotateY(0deg)',
            WebkitTransform: 'translate(0px, 0px) rotateY(0deg)',
            MozTransform: 'translate(0px, 0px) rotateY(0deg)',
            OTransform: 'translate(0px, 0px) rotateY(0deg)',
            MsTransform: 'translate(0px, 0px) rotateY(0deg)',

            }
        return {
            photo,photo_front
        }
    }
    //中间图片的样式渲染
    centerPhotoStyle(side) {
        let  photo = {
            left: '50%',
            top: '50%',
            margin: '-160px 0 0 -130px',
            zIndex: 100,
            /*transform: '' ,
            WebkitTransform: ''*/
            }
        let photo_front= side? {
            transform: 'translate(0px, 0px) rotateY(0deg)',
            WebkitTransform: 'translate(0px, 0px) rotateY(0deg)',
            MozTransform: 'translate(0px, 0px) rotateY(0deg)',
            OTransform: 'translate(0px, 0px) rotateY(0deg)',
            MsTransform: 'translate(0px, 0px) rotateY(0deg)',

        }: {
            transform: 'translate(260px, 0px) rotateY(180deg)',
            WebkitTransform: 'translate(260px, 0px) rotateY(180deg)',
            MozTransform: 'translate(260px, 0px) rotateY(180deg)',
            OTransform: 'translate(260px, 0px) rotateY(180deg)',
            MsTransform: 'translate(260px, 0px) rotateY(180deg)',
        }
        var style = {
            photo,photo_front
        }
        return style
    }
    //图片点击响应事件通过event.获取当前点击对象的属性等值
    onClikPhoto(e) {
        if(e&&e.target){
            console.log(e.target.id)
            this.props.onImageClick(this.props.activeImage, e.target.id.split("_")[1],this.props.images)
        }
    }
    onClikCenterPhoto(){
        this.props.onCenterImageClick()
        let side = false
        if(this.props.clickcount%2 != 0){
            side = true
        }
        this.setState({
            centerstyle: this.centerPhotoStyle(side)
        })
    }
    //渲染图片 并返回图片
    renderSidePhoto() {
        return this.props.images.map((image, n) =>{
            //定义渲染的左右侧面和中间展示的图片的标志位 赋值
            let side ="left"
            //偶数的在右边展示
            if(n%2==0) side ="right"
            return (<div key={"div"+image.num} >
                    <Image
                        //每个组件必须有自己独立的key 尤其是多个组件一同渲染的时候
                        key={"image_"+image.num}
                        //绑定当前的图片点击事件 返回当前的图片编号
                        onClickPhoto = {this.onClikPhoto}
                        photoWrapStyle={this.sidePhotoStyle(side)}
                        isChange = {this.props.isChange }
                        image = {image}
                    />
                </div>
            )
        })
    }
    //渲染中间的图片
    renderCenterImage() {
        var image = this.props.activeImage
        return (<div key={"div"+image.num} >
                <Image
                    //每个组件必须有自己独立的key 尤其是多个组件一同渲染的时候
                    key={"image_"+image.num}
                    //绑定当前的图片点击事件 返回当前的图片编号
                    onClickPhoto = {this.onClikCenterPhoto}
                    photoWrapStyle={this.state.centerstyle}
                    isChange = {this.state.isChange}
                    image = {image}
                />
            </div>
        )
    }


    render() {

        return (
                <div>
                {this.renderSidePhoto()}
                {this.renderCenterImage()}
                </div>
        )
    }
    //随机出图片的位置
    random(range){
        var min = Math.min(range[0], range[1]);
        var max = Math.max(range[0], range[1]);
        var diff = max - min;
        var number = Math.round(Math.random() * diff) + min;
        return number;
    }
    //找到图片放置的边界
    range(){
        var range = {
            left: {
                x: [],
                y: []
            },
            right: {
                x: [],
                y: []
            }
        };
        //获取最外围容器的宽度和高度
        var wrap = {
            width: 1000,
            height: 600
        };
        //获取每一张海报的宽度和高度，因为海报的大小都是一样的，所以取第一张
        var photo = {
            width: 260,
            height: 320
        };
        //按照自己想要显示的区域进行计算，左右区域的高度 (top) 范围是一样的
        range.left.x = [0 - photo.width / 4 + 130, wrap.width / 2 - photo.width * 5 / 4 + 130];
        range.left.y = [0 - photo.height / 4 + 160, wrap.height - photo.height * 3 / 4 ];
        range.right.x = [wrap.width / 2 + photo.width / 4 + 130, wrap.width - photo.width / 4 + 130];
        range.right.y = range.left.y;

        return range;
    }
}
function  mapStateToProps(state) {
    return {
        //key是rootReducer中定义的key，value是从reducer中返回过来的值，名字应该和reducer的一致
        images: state.photo.images,
        activeImage: state.photo.activeImage,
        isChange:state.photo.isChange,
        clickcount: state.centerPhoto.clickcount
    }
}
//这里是绑定方法和action中的function的
// 当触发方法的时候 由dispatch把这个分发出去 由reducer进行匹配
// 然后会返回值 由mapStateToProps把reducer返回的值 注入到当前模块的props中
//redux中用state保存数据 通过action改变数据 通过reducer进行匹配到相关的container中进行渲染

//这个方法是把action中的方法注入组件的props中 通过this.props调用这个方法
function mapDispatchToProps(dispatch) {
    return bindActionCreators({onImageClick,onCenterImageClick }, dispatch);
}
export  default connect(mapStateToProps,mapDispatchToProps)(ImageList)